<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='chrome=1'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta name='mobile-web-app-capable' content='yes'>
  <meta name='apple-mobile-web-app-capable' content='yes'>

  <meta name='twitter:card' content='summary'>
  <meta name='twitter:title' content='WebXR Samples'>
  <meta name='twitter:description' content='Sample WebXR pages for testing and reference'>

  <link rel='icon' type='image/png' sizes='32x32' href='../favicon-32x32.png'>
  <link rel='icon' type='image/png' sizes='96x96' href='../favicon-96x96.png'>

  <link rel='stylesheet' href='../css/stylesheet.css'>
  <link rel='stylesheet' href='../css/pygment_trac.css'>

  <style>
    article {
      position: relative;
      padding: 0.5em;
      background-color: rgba(255, 255, 255, 0.90);
      margin-bottom: 1em;
      border-radius: 3px;
    }

    hr {
      margin-bottom: 1em;
    }

    article h3 {
      font-size: 1.0em;
      margin-top: 0px;
      margin-bottom: 0px;
    }

    article h3::before {
      display: inline-block;
      content: attr(data-index) ' - ';
      font-weight: bold;
      white-space: nowrap;
      margin-right: 0.2em;
    }

    article h4 {
      position: absolute;
      right: 0.5em;
      top: 0.5em;
      margin-top: 0px;
      margin-bottom: 0px;
    }

    article p {
      margin: 0.5em;
    }

    article .links {
      margin-left: 0.5em;
      margin-right: 0.5em;
    }

    article a {
      display: inline-block;
    }

    article a:not(:first-child)::before {
      display: inline-block;
      content: '•';
      font-weight: bold;
      white-space: nowrap;
      margin-left: 0.5em;
      margin-right: 0.5em;
    }

    .github-link {
      font-size: 0.8em;
    }

    .wordmark img {
      width: 70%;
    }
  </style>

  <!--[if lt IE 9]>
    <script src='https://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
    <![endif]-->
  <title>WebXR - Layers Samples</title>
</head>

<body>

  <div class='container' id='container'>
    <header class='header'>
      <div id='nav'>
        <a href='../'>Samples</a>
        <a href='./' class='selected'>Layers Samples</a>
        <a href='../webgpu/'>WebGPU Samples</a>
        <a href='../proposals/'>Proposals</a>
        <a href='../tests/'>Test Pages</a>
        <a href='../report/'>Report</a>
      </div>

      <h1>
        <a href='' class='wordmark'>
          <img src='../media/logo/webxr-logo.svg' alt='WebXR Logo' />
        </a>
      </h1>
      <h2 class='tagline'>WebXR Layers Samples</h2>
    </header>

    <main class='main' id='main'>
      <p>These pages demonstrate how to use various aspects of the WebXR Layers API.<br/>

      <script>
        let pages = [
          {
            title: 'Projection Layer', category: 'Basics',
            path: 'proj-layer.html',
            description: 'Demonstrates drawing to a projection layer.',
            noPolyfill: true
          },

          {
            title: 'Quad Layer', category: 'Basics',
            path: 'quad-layer.html',
            description: 'Demonstrates drawing to a quad layer.',
            noPolyfill: true
          },

          {
            title: 'Cylinder Layer', category: 'Basics',
            path: 'cyld-layer.html',
            description: 'Demonstrates drawing to a cylinder layer.',
            noPolyfill: true
          },

          {
            title: 'Cube Layer', category: 'Basics',
            path: 'cube-layer.html',
            description: 'Demonstrates drawing to a cube layer.',
            noPolyfill: true
          },

          {
            title: 'Equirect Layer', category: 'Basics',
            path: 'eqrt-layer.html',
            description: 'Demonstrates drawing to an equirect layer.',
            noPolyfill: true
          },


          {
            title: 'Media Layer', category: 'Basics',
            path: 'media-layer-sample.html',
            description: 'Demonstrates using an equirect media layer for video playback.',
            noPolyfill: true
          },

          {
            title: 'Equirect Video', category: 'Multi-layer',
            path: 'eqrt-video.html',
            description: 'Demonstrates immersive video playback with media controls using both equirect and projection layers.',
            noPolyfill: true
          },

          {
            title: 'Layer VS Non-Layer', category: 'Multi-layer',
            path: 'quad-ab-test.html',
            description: 'An A/B test quality comparison of rendering the same square texture using quad layer vs drawing the texture directly into the scene.',
            noPolyfill: true
          },

          {
            title: 'Layer Hit Test', category: 'Multi-layer',
            path: 'quad-select.html',
            description: 'Demonstrates a work-around to implement hit test on layers by placing transparent placeholders for each quad layer in the projection layer.',
            noPolyfill: true
          },


          {
            title: 'Projection Layer with Multiview', category: 'Multiview',
            path: 'proj-multiview.html',
            description: 'Demonstrates a technique to reduce the number of state changes made while rendering.',
            noPolyfill: true
          },

          {
            title: 'Projection Layer with occlusion', category: 'Multiview',
            path: 'proj-multiview-occlusion.html',
            description: 'Demonstrates a technique to occlude the scene with real wold pixels.',
            noPolyfill: true
          },

        ];

        let mainElement = document.getElementById("main");

        // Append an element for every item in the pages list.
        let sampleIdx = 0;
        for (let page of pages) {

          if (page.category == 'divider') {
            let divider = document.createElement('hr');
            mainElement.appendChild(divider);
            continue;
          }
          sampleIdx += 1;

          let article = document.createElement('article');

          let title = document.createElement('h3');
          title.setAttribute('data-index', sampleIdx);

          let titleLink = document.createElement('a');
          titleLink.href = page.path;
          titleLink.textContent = page.title;
          title.appendChild(titleLink);
          article.appendChild(title);

          let category = document.createElement('h4');
          category.textContent = page.category;
          article.appendChild(category);

          let description = document.createElement('p');
          description.textContent = page.description;
          article.appendChild(description);

          let links = document.createElement('div');
          links.classList.add('links');

          let sourceLink = document.createElement('a');
          sourceLink.href = 'https://github.com/immersive-web/webxr-samples/blob/main/layers-samples/' + page.path;
          sourceLink.textContent = 'Source';
          links.appendChild(sourceLink);

          if (!page.noPolyfill) {
            let polyfillLink = document.createElement('a');
            polyfillLink.href = page.path + '?usePolyfill=0';
            polyfillLink.textContent = 'Run Without Polyfill';
            links.appendChild(polyfillLink);
          }

          article.appendChild(links);

          mainElement.appendChild(article);
        }
      </script>
    </main>

    <br />

    <h3><a class='github-link' href='https://github.com/immersive-web/webxr-samples'>View source on GitHub</a></h3>

    <footer class='footer'>
    </footer>
  </div>
</body>

</html>
